<template>
  <div>
    <a-button @click="handsend">123</a-button>
    <a-modal
      title="Title"
      :visible="visible"
      @ok="visible = false"
      @cancel="visible = false"
      width="80%"
      destroyOnClose
    >
      <textarea ref="mycodemirror" v-model="code" class="textareacss"></textarea>
    </a-modal>
  </div>
</template>
<script>
import 'codemirror/theme/darcula.css'
import 'codemirror/mode/javascript/javascript.js'

import CodeMirrorText from 'codemirror/lib/codemirror'
export default {
  name: 'CodeMirror',
  data() {
    return {
      visible: false,
      code:
        '// data为返回的数据\n/*\n* 说明：数据处理\n*/ \n function filter(data){\n  //数据数据逻辑\n  //返回图表的标准数据结构体\n  return data\n}',
    }
  },
  methods: {
    handsend() {
      this.visible = !this.visible
      this.init_load()
    },
    init_load() {
      console.log(CodeMirrorText)
      this.$nextTick(() => {
        CodeMirrorText.fromTextArea(this.$refs.mycodemirror, {
          mode: 'text/javascript', // 选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
          lineNumbers: true,
          theme: 'darcula',
          readOnly: true, // 只读
          line: true,
        })
      })
    },
  },
}
</script>

<style>
.textareacss {
  height: 30vh;
  width: 100%;
}
</style>
